import 'package:flutter/material.dart';
import 'package:flutter_api/widgets/title_text_container.dart';

// 按钮
class ButtonPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(12.0),
      child: ListView(
        children: [
          TitleTextContainer('填充的水波纹按钮(RaisedButton)',
              child: RaisedButtonWidget()),
          TitleTextContainer('带图标的按钮(RaisedButton.icon、IconButton)',
              child: IconButtonByNamedWidget()),
          TitleTextContainer('扁平化按钮(FlatButton)', child: FlatButtonWidget()),
          TitleTextContainer('带边框的按钮(OutlineButton)',
              child: OutlineButtonWidget()),
          TitleTextContainer('自定义组合按钮', child: CustomButtonWidget()),
          TitleTextContainer('占满父元素按钮', child: FormButtonWidget()),
          TitleTextContainer('按钮组(ButtonBar)', child: ButtonBarWidget()),
          TitleTextContainer('更多弹框(PopupMenuButton)', child: PopMenuWidget()),
        ],
      ),
    );
  }
}

// 水波纹按钮
class RaisedButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        // 去除默认内边距
        padding: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
        child: Text('圆角水波纹的按钮(RaisedButton)'),
        color: Colors.yellow,
        textColor: Colors.black54,
        // 设置阴影
        elevation: 20,
        // 水波纹颜色
        splashColor: Colors.yellow[100],
        // 按下时的颜色
        highlightColor: Colors.orange,
        // 圆角矩形
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
        onPressed: () {
          print('chick');
        });
  }
}

// 带图标按钮
class IconButtonByNamedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RaisedButton.icon(
          onPressed: () {},
          icon: Icon(Icons.add),
          label: Text('带图标的按钮'),
        ),

        // 按钮有默认(最小的)width、height
        // 嵌套ButtonTheme改变默认样式，如改变默认大小
        ButtonTheme(
          child: IconButton(icon: Icon(Icons.add), onPressed: () {}),
        )
      ],
    );
  }
}

// 扁平化按钮
class FlatButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.grey,
      alignment: Alignment.center,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // FlatButton上下有个安全距离，保证其尽量扩充高度为48像素
          FlatButton(
            onPressed: () {},
            color: Colors.red,
            child: Text('扁平化按钮'),
            // 去掉安全距离
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          ),
          FlatButton(
            onPressed: () {},
            color: Colors.red,
            // 圆形边框
            shape: CircleBorder(side: BorderSide(color: Colors.green)),
            child: Text('扁'),
          ),
        ],
      ),
    );
  }
}

// 带边框的按钮
class OutlineButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OutlineButton(
      onPressed: () {},
      child: Text('带边框的按钮'),
    );
  }
}

// 自定义按钮组合控件
class CustomButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
        onPressed: () {},
        color: Colors.yellow,
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
        child: Row(
          // Row默认占满父元素，改为min变为包裹内容
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.favorite,
              color: Colors.red,
            ),
            Text('喜欢作者'),
          ],
        ));
  }
}

// 占满父元素的按钮
class FormButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      child: Row(
        children: [
          Expanded(
              flex: 1,
              child: ElevatedButton(
                onPressed: () {},
                child: Text('提交'),
              )),
          SizedBox(width: 8.0),
          Expanded(
              flex: 2,
              child: ElevatedButton(
                onPressed: () {},
                child: Text('删除'),
              )),
        ],
      ),
    );
  }
}

// 并排显示的按钮组
class ButtonBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
        // 重写按钮样式，改变按钮之间的间距
        data: Theme.of(context).copyWith(
            buttonTheme: ButtonThemeData(
                padding: EdgeInsets.symmetric(horizontal: 32.0))),
        child: ButtonBar(
          children: [
            TextButton(onPressed: () {}, child: Text('在看')),
            TextButton(onPressed: () {}, child: Text('评论')),
            TextButton(onPressed: () {}, child: Text('收藏')),
          ],
        ));
  }
}

// 更多 弹框
class PopMenuWidget extends StatefulWidget {
  @override
  _PopMenuWidgetState createState() => _PopMenuWidgetState();
}

class _PopMenuWidgetState extends State<PopMenuWidget> {
  String selectItem = "Nothing";

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text("$selectItem"),
        PopupMenuButton(
          itemBuilder: (ctx) {
            return [
              PopupMenuItem(
                child: Text('我的'),
                value: "me",
              ),
              PopupMenuItem(
                child: Text('购物车'),
                value: "car",
              ),
              PopupMenuItem(
                child: Text('首页'),
                value: "home",
              ),
            ];
          },
          onSelected: (value) {
            setState(() {
              selectItem = value;
            });
          },
        )
      ],
    );
  }
}
